<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>PhoneGap</title>
	  <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8">
	  <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>	  
      <script type="text/javascript" src="khtml.js"> </script>	  
	  <script type="text/javascript" charset="utf-8">
	  
	    var map;  
		var zoom;
		    
		var setMapCenter = function (lat, lon, zoom) {
		  var center=new kPoint(lat, lon);
          map.setCenter(center,zoom);
		}    
		    
        var getLocation = function() {
          zoom = map.getZoom();
          var suc = function(p){
		    setMapCenter(p.coords.latitude, p.coords.longitude, map.getZoom());
          };
          var fail = function(){
      		setMapCenter(0, 0, map.getZoom());
          };
          navigator.geolocation.getCurrentPosition(suc,fail);
        }
  
	    function init(){
	      var width = window.innerWidth;
	      var height = window.innerHeight - 60;
	      var size = "width: 100%; height: " + height + "px";
	      document.getElementById("map").setAttribute('style', size);	

          map=new kmap(document.getElementById("map"));
          zoom = 15;
          setMapCenter(0, 0, zoom);
	      setInterval("getLocation()", 10000);
          map.addCallbackFunction(zoomer);
          zoomer(zoom);
	    }
 
	    function zoomer(z){
          if(z){
            var zoom=z;
          }else{
            var zoom=map.getZoom();
          }
          var scroller=document.getElementById("zoomer");
          scroller.style.top=180-zoom*10+"px";
          var zoomRound=Math.floor(zoom*10)/10;
          scroller.textContent=zoomRound;
	    }
 
	startY=null;
	function zoomTo(evt){
        evt.preventDefault();
        var scroller=document.getElementById("zoombar");
        //var y=evt.pageY - startY -scroller.offsetTop;
        var y=evt.pageY  -scroller.offsetTop;
        var zoom=(180-y +15)/10;
        zoom=limiter(zoom);
        startY=y
 
        map.setCenter(map.getCenter(),zoom);
	}
 
	function zoommove(evt){
        if(startY){
        evt.preventDefault();
        //var y=evt.pageY - startY;
        var scroller=document.getElementById("zoombar");
        var y=evt.pageY  -scroller.offsetTop;
        var zoom=(180 -y +15)/10 ;
        zoom=limiter(zoom);
        map.setCenter(map.getCenter(),zoom);
        }
	}
	function zoomup(evt){
        evt.preventDefault();
        startY=null;
	}
	function limiter(zoom){
        if(zoom > 18) return 18 ;
        if(zoom < 1) return 1 ;
        return zoom;
	}
	
	
  </script>
  </head>
  <body onload="init();" id="stage" class="theme">
    
    <div id="map" >
    </div>
    <div id="zoombar" onmousedown="zoomTo(event)" ><div id="zoomer"> </div> </div>

    <a href="#" onclick="getLocation()" class="btn large">Add POI</a>
  </body>
</html>
